<template>
  <div class="leave-word-list table-theme">
    <el-breadcrumb separator="/">
			<el-breadcrumb-item>营销--留言建议列表</el-breadcrumb-item>
		</el-breadcrumb>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <p class="data-number">数据总数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column
          label="序号"
          align="center"
          prop="message_id"
        ></el-table-column>
        <el-table-column
          label="用户id"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column
          label="手机号码"
          align="center"
          prop="phone"
        ></el-table-column>
        <el-table-column
          label="留言类型"
          align="center"
          prop="typeName"
        ></el-table-column>
        <el-table-column
          label="留言内容"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="图片"
          align="center"
        >
        <template slot-scope="scope">
						<ImgPopover :src="item" v-for="(item,index) in String(scope.row.images).split(',')" :key="index" v-if="String(scope.row.images).indexOf(',') != -1"></ImgPopover>
						<ImgPopover :src="scope.row.images" v-else></ImgPopover>
					</template>
        </el-table-column>
        <el-table-column
          label="留言时间"
          align="center"
          prop="add_time"
        ></el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :page-size="30"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
  data() {
    return {
      title: "全部",
      total: 0,
      page: 0,
      time: 0,
      list: [],
    };
  },
  methods: {
    init(e) {
      this.page = e
      let data = {
        limit:30,
        page:e-1 ? e-1 :0
      }
      this.$http(this.$ApiList.MessageList,data).then(res => {
        const { count, data } = res.datas;
        this.total = count;
        this.list = data;
      });
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.init();
    },
  },
  components: {
    ImgPopover
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.leave-word-list {
  .data-filtering-left {
    display: flex;
  }

  .leave-word-title {
    font-size: 26px;
    font-weight: bold;
  }
}
</style>